<script setup>
import {defineProps, onBeforeMount} from 'vue'
import {useRouter} from "vue-router";
import {getServerUrl} from "@/utils/request.js";

let router = useRouter();
let props = defineProps({
  index: Number,
  foodList: Array
})
const jump = (id) => {
  router.push({
    path: '/storeDetails',
    query: {
      id: id,
    }
  })
}
const getImage = () => {
  return getServerUrl() + 'media/store/';
}
onBeforeMount(() => {
  getImage()
})
</script>
<template>
  <div class="menu" v-for="(item) in foodList" @click="jump(item.id)">
    <div class="content">
      <div class="img">
        <img :src="getImage()+item.img">
      </div>
      <div class="text">
        <h3>{{ item.name }}</h3>
        <div class="rate">
          <template v-if="item.rate">
            <van-rate
            :size="12"
              v-model="item.rate"
              color="#FFBA20"
              void-icon="star"
              void-color="#eee"
              readonly 
              allow-half
            />
            <div class="pf">{{ item.rate }}</div>
          </template>
          <template v-else>
            <div>暂无评价</div>
          </template>
          <div class="sale" v-if="item.sale">月售{{ item.sale }}</div>
        </div>

        <div class="price">
          <span class="span1">起送￥{{ item.price1 }} | </span>
          <span class="span2">配送￥{{ item.price2 }}</span>
        </div>
      </div>
      <div class="distance">
        <span v-if="item.distance">{{ item.distance }}km</span>
      </div>
    </div>
  </div>
</template>


<style scoped>
.menu .img img {
  width: 160px;
}

.content {
  position: relative;
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 0.5px solid #ECECEC;
}

.menu .text {
  width: 90%;
  margin-left: 22px;
}

.menu .text h3 {
  position: relative;
  top: -15px;
  font-size: 32px;
  font-weight: normal;
}

.menu .text .rate .sale {
  color: #333333;
  margin-left: 22px;
}

.menu .text .rate .pf {
  padding-left: 10px;
  position: relative;
  top: 1.7px;
}

.menu .text .rate {
  display: flex;
  align-items: center;
  justify-content: left;
  padding-bottom: 5px;
  font-size: 24px;
}


.menu .text .price {
  color: #666666;
  font-size: 24px;
}

.menu .distance span {
  display: inline-block;
  position: relative;
  font-size: 30px;
  top: -50px;
}
</style>